<template>
  <Card>
    <span slot="title">评审信息</span>
    <div slot="content">
      <div class="container">
        <el-dialog
          title="材料类型信息"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <el-form ref="form" :model="form" label-width="100px" status-icon>
            <el-form-item label="材料名称：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="类型编号：">
              <el-input v-model="form.number"></el-input>
            </el-form-item>
            <el-form-item label="申报资格：">
              <el-select v-model="form.qualification" placeholder="请选择">
                <el-option
                  label="深圳木卫二科技有限公司"
                  value="shanghai"
                ></el-option>
                <el-option
                  label="木卫二科技有限公司"
                  value="beijing"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="form.order"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <we-button @click="cancel" size="mini">取 消</we-button>
            <we-button type="primary" size="mini" @click="editInfo"
              >确 定</we-button
            >
          </span>
        </el-dialog>
        <div class="table_content">
          <div class="add" @click="dialogVisible = true">
            <i class="el-icon-plus"></i> 添加
          </div>
          <div class="form">
            <el-table
              size="mini"
              :data="tableData"
              style="width: 100%"
              stripe
              select-on-indeterminate
            >
              <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.num }}</span>
                </template>
              </el-table-column>
              <el-table-column label="活动名称" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.activityName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="申报资格" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.qualification
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="材料名称" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.materials
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="别名">
                <template slot-scope="scope" width="80">
                  <span style="margin-left: 10px">{{ scope.row.alias }}</span>
                </template>
              </el-table-column>
              <el-table-column label="max">
                <template slot-scope="scope" width="80">
                  <span style="margin-left: 10px">{{ scope.row.max }}</span>
                </template>
              </el-table-column>
              <el-table-column label="min">
                <template slot-scope="scope" width="80">
                  <span style="margin-left: 10px">{{ scope.row.min }}</span>
                </template>
              </el-table-column>
              <el-table-column label="系数差" width="80">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.coefficient
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.max">
                    <we-button
                      size="mini"
                      type="primary"
                      plain
                      @click="handleEdit(scope.$index, scope.row)"
                    >
                      修改</we-button
                    >
                    <we-button size="mini" type="danger">删除</we-button>
                  </div>
                  <div v-else>
                    <we-button
                      size="mini"
                      type="primary"
                      plain
                      @click="handleEdit(scope.$index, scope.row)"
                    >
                      添加</we-button
                    >
                    <we-button size="mini" type="danger" plain>删除</we-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="table_tools">
              <!-- <we-button size="small" @click="toggleSelection"
                >取消全选</we-button
              > -->
              <we-pagination :total="pagination.total"></we-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card'
import WeButton from '@/components/WeButton'
import WePagination from '@/components/WePagination'
export default {
  components: {
    Card,
    WeButton,
    WePagination
  },
  data () {
    return {
      form: {
        name: '',
        number: '',
        qualification: '',
        order: ''
      },
      dialogVisible: false,
      // 分页数据
      pagination: {
        total: 30
      },
      tableData: [
        {
          num: 1,
          activityName: '2020年末',
          qualification: '水利工程正高级',
          materials: '文档1',
          alias: '',
          max: '',
          min: '',
          coefficient: ''
        },
        {
          num: 2,
          activityName: '2021年初',
          qualification: '技师中级',
          materials: '文档2',
          alias: '2',
          max: '2.00',
          min: '2.00',
          coefficient: '2.00'
        }
      ]
    }
  },
  methods: {
    handleEdit (index, value) {},
    // 关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 取消
    cancel () {
      this.dialogVisible = false
    },
    // 修改
    editInfo () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  border-radius: 5px;
  margin: 20px 12px;
  position: relative;
  .table_content {
    padding: 0 20px;
  }
  .table_content .add {
    width: 72px;
    height: 28px;
    background-color: #0063c7;
    color: #fff;
    text-align: center;
    line-height: 28px;
    border-radius: 5px;
    margin: 32px 0;
    font-size: 14px;
    &:hover {
      background-color: #5ab5ff;
    }
  }
  .form {
    margin-bottom: 50px;
    .table_tools {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
